<template>
  <template v-for="item in list" :key="item.path">
    <el-sub-menu v-if="item.children?.length" :index="item.path">
      <template #title>
        <i class="iconfont icon mr-4" :class="item.icon" v-if="item.icon" />
        <span class="title" :class="{ space: !!item.icon }">
          {{ setI18n(item.i18n, item.title) }}
        </span>
      </template>
      <xt-menu-item :list="item.children" />
    </el-sub-menu>

    <el-menu-item v-else :index="item.path">
      <i class="iconfont icon mr-4" :class="item.icon" v-if="item.icon" />
      <span class="title" :class="{ space: !!item.icon }">
        {{ setI18n(item.i18n, item.title) }}
      </span>
    </el-menu-item>
  </template>
</template>

<script lang="ts">
export default {
  name: "xt-menu-item",
};
</script>

<script setup lang="ts">
import { MenuType } from "@/typings";
import { useLocalI18n } from "@/locales/i18n";
const { setI18n } = useLocalI18n();

type PropType = {
  list: MenuType[];
};

withDefaults(defineProps<PropType>(), {
  list: () => [],
});
</script>
